<%@ page import="org.springframework.web.context.request.SessionScope" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("ctx", request.getContextPath());%>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.9.14/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/layui_ext/xmSelect/xm-select.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/crypto-js.js"></script>
    <title>工单列表</title>
</head>
<body>
<form class="layui-form layui-row layui-col-space16">

    <div id="demo1" style="width: 300px; margin: 20px;"></div>
    <div class="layui-btn-container layui-col-xs12">
        <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
        <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
    </div>
</form>
<div style="display: none" id="fp">
    <form class="layui-form" action="">
        <input type="text" name="id" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">验收人</label>
            <div class="layui-input-block">
                <div id="demo2" style="width: 300px; margin: 20px;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">分配</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>
<button class="layui-btn" lay-on="e1">添加工单</button>
<table class="layui-hide" id="ID-table-demo-search"></table>
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="fp" style="display: {{d.statusType==0?'':'none'}}">分配</a>
        <a class="layui-btn layui-btn-xs" lay-event="ja" style="display: {{d.statusType==2?'':'none'}}">结案</a>
        <a class="layui-btn layui-btn-xs" lay-event="pj" style="display: {{d.statusType==3?'':'none'}}">评价</a>
        <a class="layui-btn layui-btn-xs" lay-event="ck">查看</a>
    </div>
</script>
<script>
    layui.use(function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var util = layui.util;
        //  2.9+ 版本可省略 attr 参数，默认读取 lay-on
        util.on({
            e1: function () {
                location.href="/order/toadd.do";
            },
        })


        // 触发单元格工具事件
        table.on('tool(ID-table-demo-search)', function(obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            $("#id").val(data.id);
            if (obj.event === 'fp') {
                layer.open({
                    title: '编辑 - id:' + data.id,
                    type: 1,
                    area: ['80%', '80%'],
                    content: $("#fp")
                });
            }else if (obj.event === 'ck'){
                location.href="/order/todetial.do?id="+data.id;
            }
        })


        var listCommunity=JSON.parse('${listCommunity}')
        //渲染多选
        var demo1 = xmSelect.render({
            el: '#demo1',
            data:listCommunity
        })

        var listWorker=JSON.parse('${workerList}')
        //渲染多选
        var demo2 = xmSelect.render({
            el: '#demo2',
            data:listWorker
        })


        // 提交事件
        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值


            $.post("/order/fp.do",field,function (res) {
                if (res.code==0){
                    layer.msg(res.msg,function () {
                        layer.closeAll();
                        table.reload("ID-table-demo-search")
                    })
                }else {
                    layer.msg(res.msg);
                }
            })

            return false; // 阻止默认 form 跳转
        });




        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-search',
            url: '/order/list.do', // 此处为静态模拟数据，实际使用时需换成真实接口
            parseData:function (res) {
                return{
                    code:res.code,
                    data:res.data.list,
                    count:res.data.total,
                }
            },
            limit:3,
            cols: [[
                {type: 'radio', title: '😊', fixed: true}, // 单选框
                {field:'id', title: '序号', width:80, sort: true, fixed: true},
                {field:'communityName', title: '所属小区', width:110},
                {field:'orderTypeName', title: '工单类型', width:100, sort: true},
                {field:'title', title: '报修小区', width:150},
                {field:'submitter', title: '报修人', width:80},
                {field:'submitterTime', title: '报修时间', width:160},
                {field:'username', title: '处理人', width:100},
                {field:'createTime', title: '处理时间', width:160},
                {field:'statusTypeName', title: '状态', width:90},
                {fixed: 'right', title:'操作', width: 190, minWidth: 125, templet: '#toolDemo'}
            ]],
            page: true,
            height: 310
        });
        // 日期
        laydate.render({
            elem: '.demo-table-search-date'
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('ID-table-demo-search', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });
    });
</script>

</body>
</html>